<template>
	<view>
		<!-- tabs -->
		<view class="bg c-flex-start-start">
			<view class="navSearch">
				<u-navbar :placeholder="true" leftText="" title="" bgColor="rgba(0,0,0,0)" auto-back></u-navbar>
			</view>
			<text>Welcome!</text>
			<text>欢迎来到美业</text>
		</view>
		<!-- 输入框验证码 -->
		<view class="titleBox">
			<view class="c-flex-center-center" style="width: 180rpx;">
				<text>欢迎注册</text>
				<text
					style="width: 48rpx;height: 8rpx;background: #CB645E;border-radius: 4rpx;margin-top: 10rpx;"></text>
			</view>
		</view>
		<view class="inputBox">
			<u--input class="inputClass" placeholder="请输入店铺名称" type="text" border="none" clearable
				v-model="formData.businessName" v-if="role==2" :customStyle="{
					height:'96rpx',
					margin:'10rpx 0'
				}"></u--input>
			<u--input class="inputClass" placeholder="请输入手机号" type="text" border="none" clearable
				v-model="formData.mobile" :customStyle="{
					height:'96rpx',
					margin:'10rpx 0'
				}"></u--input>
			<!-- #ifndef APP-NVUE -->
			<u-input class="inputClass" placeholder="请输入验证码" type="text" border="none" v-model="formData.code"
				:customStyle="{
					height:'96rpx',
					margin:'10rpx 0'
				}">
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<u--input class="inputClass" placeholder="请输入验证码" type="text" border="none" v-model="formData.code"
					:customStyle="{
					height:'96rpx',
					margin:'10rpx 0'
				}">
					<!-- #endif -->
					<template #suffix>
						<view class="countDown" v-if="formData.dis">
							{{ formData.count }}秒后可重新获取
						</view>
						<view class="countDown" v-if="!formData.dis" @click="sendCode">
							{{ formData.codeText }}
						</view>
					</template>
					<!-- #ifndef APP-NVUE -->
			</u-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
			<!-- 密码1 -->
			<!-- #ifndef APP-NVUE -->
			<u-input class="inputClass" placeholder="请输入密码" :type="formData.passwrdType1" border="none"
				v-model="formData.password1" :customStyle="{
					height:'96rpx',
					margin:'10rpx 0'
				}">
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<u--input class="inputClass" placeholder="请输入密码" :type="formData.passwrdType1" border="none"
					v-model="formData.password1" :customStyle="{
					height:'96rpx',
					margin:'10rpx 0'
				}">
					<!-- #endif -->
					<template #suffix>
						<view class="" @click="changeInput(1)">
							<u-icon name="eye-fill"></u-icon>
						</view>
					</template>
					<!-- #ifndef APP-NVUE -->
			</u-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
			<!-- 密码2 -->
			<!-- #ifndef APP-NVUE -->
			<u-input class="inputClass" placeholder="请再次输入密码" :type="formData.passwrdType2" border="none"
				v-model="formData.password2" :customStyle="{
					height:'96rpx',
					margin:'10rpx 0'
				}">
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<u--input class="inputClass" placeholder="请再次输入密码" :type="formData.passwrdType2" border="none"
					v-model="formData.password2" :customStyle="{
					height:'96rpx',
					margin:'10rpx 0'
				}">
					<!-- #endif -->
					<template #suffix>
						<view class="" @click="changeInput(2)">
							<u-icon name="eye-fill"></u-icon>
						</view>
					</template>
					<!-- #ifndef APP-NVUE -->
			</u-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</u--input>
			<!-- #endif -->
		</view>
		<!-- 输入框密码 -->
		<!-- 按钮 -->
		<view class="submitBox" @click="register">
			注册
		</view>
		<view class="registerNew" @click="linkRegister">
			<text style="color:  rgba(0,0,0,0.65);">已注册，</text>去登陆
			<u-icon name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref,
	} from "vue";
	import {
		validatePhoneNumber
	} from '@/utlis/common.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from 'vue'
	import router from "../../../router";
	import {
		userStore
	} from '@/pinia';
	const {
		proxy,
	} = getCurrentInstance()
	let role = uni.getStorageSync('roleFlag')
	let formData = reactive({
		businessName: '',
		mobile: '',
		password1: '',
		password2: '',
		code: '',
		passwrdType1: 'password',
		passwrdType2: 'password',
		dis: false,
		count: 0,
		codeText: '获取验证码'
	})
	let wxInfo = ref(null)
	let flag = ref(0)
	onLoad((op) => {
		console.log(op);
		wxInfo.value = JSON.parse(op.wxInfo)
		flag.value = op.flag
	})
	const register = (e) => {
		console.log(e);
		if (!formData.businessName && role == 2) {
			uni.showToast({
				title: '店铺名不能为空',
				icon: 'none'
			})
			return
		}
		if (!validatePhoneNumber(formData.mobile)) {
			uni.showToast({
				title: '手机号不合法',
				icon: 'none'
			})
			return
		}
		if (formData.code.length < 4) {
			uni.showToast({
				title: '验证码不合法',
				icon: 'none'
			})
			return
		}
		if (formData.password1 !== formData.password2) {
			uni.showToast({
				title: '两次密码输入的不一致',
				icon: 'none'
			})
			return
		}
		if (formData.password1.length < 4) {
			uni.showToast({
				title: '密码不合法',
				icon: 'none'
			})
			return
		}
		const userStoreInfo = userStore();
		proxy.$req('POST', proxy.$api.register, {
			enterpriseName: formData.businessName,
			code: formData.code,
			memberType: uni.getStorageSync('roleFlag'),
			password: formData.password1,
			phone: formData.mobile,
			openid: flag.value == 0 ? wxInfo.value.openId : '',
			avatar: flag.value == 0 ? wxInfo.value.headImgUrl : '',
			nickname: flag.value == 0 ? wxInfo.value.nickname : '',
		}, '').then((res) => {
			// console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				//存用户信息
				userStoreInfo.doLogin(res.result, uni.getStorageSync('roleFlag'))
				//是否认证
				if (uni.getStorageSync('roleFlag') == 1 && res.result.shoppingStore == 0) {
					router.push({
						name: 'authRole',
						params: {}
					})
				} else if (uni.getStorageSync('roleFlag') == 2 && res.result.supplier == 0) {
					router.push({
						name: 'authRole',
						params: {}
					})
				} else {
					router.pushTab({
						name: 'index',
						params: {}
					})
				}
			}
		})
	}
	const sendCode = (e) => {
		if (!validatePhoneNumber(formData.mobile)) {
			uni.showToast({
				title: '手机号不合法',
				icon: 'none'
			})
			return
		}
		proxy.$req('POST', proxy.$api.getCode, {
			mobile: formData.mobile,
			smsmode: '1'
		}, '').then((res) => {
			// console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				getCode()
			}
		})
	}
	const linkRegister = () => {
		uni.navigateBack()
	}
	const changeInput = (e) => {
		if (e == 1) {
			if (formData.passwrdType1 == 'text') {
				formData.passwrdType1 = 'password'
			} else {
				formData.passwrdType1 = 'text'
			}
		} else {
			if (formData.passwrdType2 == 'text') {
				formData.passwrdType2 = 'password'
			} else {
				formData.passwrdType2 = 'text'
			}
		}


	}
	const getCode = () => {
		// 开始计时，结束后重新发送
		let TIME_COUNT = 120;
		let timer = null;
		let show = true;
		if (!timer) {
			formData.count = TIME_COUNT;
			show = false;
			formData.dis = true;
			timer = setInterval(() => {
				if (formData.count > 0 && formData.count <= TIME_COUNT) {
					formData.count--;
				} else {
					formData.dis = false;
					formData.codeText = '重新获取'
					show = true;
					clearInterval(timer);
					timer = null;
				}
			}, 1000);
		}
	}
</script>

<style lang="scss">
	.bg {
		background-image: url('../../static/images/loginBg.png');
		background-size: 100% 100%;
		width: calc(100% - 68rpx);
		height: 456rpx;
		padding: 216rpx 64rpx 0;

		text:nth-child(2) {
			font-size: 60rpx;
			color: rgba(0, 0, 0, 0.85);
			margin-bottom: 10rpx;
		}

		text:nth-child(3) {
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

	}

	::v-deep() {
		.u-tabs__wrapper__nav__item {
			align-items: flex-end;
			height: 150rpx;
		}

		.u-input__content {
			height: 80rpx;
		}
	}

	.titleBox {
		width: 622rpx;
		height: 130rpx;
		margin: -200rpx auto 0;
		padding: 30rpx 32rpx 0;
		background-color: #fff;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		font-size: 40rpx;
		font-weight: 500;
		color: #000000;
	}

	.inputBox {
		width: 558rpx;
		// height: 460rpx;
		margin: 0rpx auto 0;
		// border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		background-color: #fff;
		padding: 0 64rpx;
	}

	.countDown {
		font-size: 20rpx;
		color: #c4c9cf;
	}

	.submitBox {
		width: 622rpx;
		height: 96rpx;
		background: #CB645E;
		color: #fff;
		border-radius: 10rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: 500;
		margin: 100rpx auto 30rpx;
	}

	.registerNew {
		font-size: 28rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>